<template>
    <el-dialog :visible.sync="dialogVisible" title="PDF预览" width="90%" custom-class="pdf-dialog">
        <div class="pdf-container">
            <div v-if="dialogVisible" class="left">
                <pdf :src="pdfUrl" :page="currentPage" @num-pages="setNumPages" @link-clicked="goToPage" />
                <div class="pagination">
                    <button @click="prevPage">上一页</button>
                    <span>{{ currentPage }} / {{ totalPages }}</span>
                    <button @click="nextPage">下一页</button>
                </div>
            </div>
            <!-- <div class="right">
                <div class="title">请输入您的结论</div>
                <div class="line">
                    1. 睡眠呼吸暂停低通气综合征：
                    <el-radio v-model="form.val1" label="1">符合</el-radio>
                    <el-radio v-model="form.val1" label="2">不符合</el-radio>
                </div>
                <div class="line">
                    2. 以（
                    <el-radio v-model="form.val2" label="1">阻塞性</el-radio>
                    <el-radio v-model="form.val2" label="2">中枢性</el-radio>
                    <el-radio v-model="form.val2" label="3">混合型</el-radio>
                    ） 为主程度：（
                    <el-radio v-model="form.val3" label="4">轻</el-radio>
                    <el-radio v-model="form.val3" label="5">中</el-radio>
                    <el-radio v-model="form.val3" label="6">重</el-radio>
                    ）度。
                </div>
                <div class="line">
                    3. 睡眠低氧血症的程度状况：（
                    <el-radio v-model="form.val4" label="1">轻</el-radio>
                    <el-radio v-model="form.val4" label="2">中</el-radio>
                    <el-radio v-model="form.val4" label="3">重</el-radio>
                    ） 。
                </div>
                <div class="line">
                    4. 建议：
                    <el-checkbox-group v-model="form.val5">
                        <el-checkbox label="1">减肥</el-checkbox>
                        <el-checkbox label="2">口腔矫治</el-checkbox>
                        <el-checkbox label="3">手术</el-checkbox>
                        <el-checkbox label="4">呼吸机治疗</el-checkbox>
                        <el-checkbox label="5">药物治疗</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="line">
                    5. 其他：
                    <el-input v-model="form.val6" type="textarea"></el-input>
                </div>
                <div class="btn">
                    <el-button  @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                    <el-button type="primary" @click="downloadOrigin">直接下载</el-button>
                </div>
            </div> -->
        </div>
    </el-dialog>
</template>
  
<script>
import pdf from "vue-pdf";
export default {
    name: "PdfDialog",

    props: {
    },
  
    data () {
        return {
            id: "",
            form: {
                val1: "",
                val2: "",
                val3: "",
                val4: "",
                val5: [],
                val6: ""
            },
            dialogVisible: false,
            pdfUrl: "",
            currentPage: 1,
            totalPages: 0
        };
    },

    components: { pdf },
  
    created () {},
  
    mounted () {},
  
    methods: {
        openPdf () {
            this.dialogVisible = true;
        },
        setNumPages (num) {
            this.totalPages = num;
        },
        goToPage (page) {
            this.currentPage = page;
        },
        prevPage () {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        nextPage () {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },

        /* 直接下载 */
        downloadOrigin () {
            window.location = this.pdfUrl;
        },

        /* 提交 */
        handleSubmit () {
            const params = {
                id: this.id,
                resultOne: this.form.val1,
                resultTwoList: [this.form.val2, this.form.val3],
                resultThree: this.form.val4,
                resultFourList: this.form.val5,
                resultFive: this.form.val6,
                doctorName: this.$store.state.user.userInfo.accountInfo.realName || ""
            };
            this.$request.post(this.API.UPDATE_PDF, params).then(res => {
                if (res.success) {
                    this.$message({ message: "保存成功!", type: "success" });
                    this.dialogVisible = false;
                    this.$emit("refresh");
                }
            });
        }
    }
};
</script>
  
<style lang="scss" scoped>
.pdf-dialog {
    .pdf-container {
        display: flex;
        flex-direction: row;
        height: 100%;
        .left {
            flex: 1;
            width: 70%;
            max-height: 70vh;
            overflow: auto;
            .pagination {
                margin-top: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                button {
                    margin: 0 10px;
                }
            }
        }
        .right {
            width: 30%;
            padding-left: 20px;
            border-left: 1px solid #ccc;
            .title {
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 20px;
            }
            .line {
                margin-bottom: 10px;
                font-size: 16px;
                line-height: 30px;
                .el-radio {
                    margin-right: 3px;
                }
            }
        }
    }
    
}

</style>
  